<template>
	 <view class="container">
		<view class="header" @click="toMyInformation">
			<view class="header-con" >
				<image class="toxiang" :src="image" ></image>
			</view>
	      <text class="username" decode>{{username}}</text>
	      <text class="phone" > {{phoneNumber}}</text>
	    </view>
	    <view class="discount" @click="toCoupon">
		  <view class="discount-l"> 
		  <image class="discount-log1" src="/static/my/彩色-优惠券@2x.png"></image>
		  <view>我的优惠券</view>
		  </view>
		  <view class="discount-r">
			  <image class="discount-log2" src="/static/my/收起箭头小@2x.png"></image>
		  </view>
	  </view>
	    <view class="menu">
			<view class="menu-t" @click="toMyMaintenance">
				<text class="mt-t">我的订单</text>
				<view class="menu-r"><image class="menu-p1" src="/static/my/收起箭头小@2x.png"></image></view>
			</view>
			<view class="menu-b">
				<view class="btn-pay">待支付</view>
				<view class="btn-use">待使用</view>
				<view class="btn-review">待评价</view>
	      	</view>
	    </view>
			
		<view class="services">
			<view class="services-t">
				<text class="mt-t">我的服务</text>
			</view>
			
			<view class="services-b">
			  <view class="services-bb">
				<view class="service-item" @click="toCouponCenter">
				<image src="/static/my/组 9@2x(3).png" class="services-p"></image>
				<view>领卷中心</view></view>
				<view class="service-item">
				<image src="/static/my/组 9@2x(4).png" class="services-p"></image>
				<view>邀请好友</view></view>
				<view class="service-item" @click="toMyCar">
				<image src="/static/my/组 9@2x(5).png" class="services-p"></image>
				<view>我的车辆</view></view>
				<view class="service-item" @click="toPurchaseHistory">
				<image src="/static/my/组 9@2x(6).png" class="services-p"></image>
				<view>消费记录</view></view>
			  </view>

			 <view  class="services-bb">
				<view class="service-item" @click="toMyMaintenance">
				<image src="/static/my/组 9@2x(7).png" class="services-p"></image>
				<view>我的维修</view></view>
				<view class="service-item">
				<image src="/static/my/组 9@2x(8).png" class="services-p"></image>
				<view>意见反馈</view></view>
				<view class="service-item">
				<image src="/static/my/组 9@2x(9).png" class="services-p"></image>
				<view>收货地址</view></view>
				<view class="service-item">
				</view>
			 </view>
			</view>
		</view>
		<view class="bottom">
			 <button class="logout">退出登录</button>
		</view>
	 
	  </view>
	   
</template>

<script>
	
	export default {
		data() {
			return {
				username:"张先生&ensp;",
				phoneNumber: "18602564789", 
				image:"/static/my/头像框.png"
			}
		},
		methods: {
			toMyInformation(){
				uni.navigateTo({
					url:"/pages/my/myInformation/myInformation"
				})
			},
			toCoupon(){
				uni.navigateTo({
					url:"/pages/my/coupon/coupon"
				})
			},
			toMyMaintenance(){
				uni.navigateTo({
					url:"/pages/my/myMaintenance/myMaintenance"
				})
			},
			toCouponCenter(){
				uni.navigateTo({
					url:"/pages/my/couponCenter/couponCenter"
				})
			},
			toMyCar(){
				uni.navigateTo({
					url:"/pages/my/myCar/myCar"
				})
			},
			toPurchaseHistory(){
				uni.navigateTo({
					url:"/pages/my/purchaseHistory/purchaseHistory"
				})
			},
			toMyMaintenance(){
				uni.navigateTo({
					url:"/pages/my/myMaintenance/myMaintenance"
				})
			},
			
		}
	}
</script>

<style>
.container {
	position: relative;
	width: 100%;
	background-color: #F7F7F7;
	font-size: 26rpx;
}

.header {
	height: 350rpx;
	width: 100%;
	color: #FFF;
  text-align: center;
   background-image: url("/static/my/我的背景.png");
   background-repeat: no-repeat;
   background-size: cover; /* 或者使用 contain */
   background-position: center; /* 确保背景图像居中 */
}

.toxiang{
	height: 90rpx;
	width: 90rpx;
	margin-top: 50rpx;
	margin-bottom: 20rpx;
}
.discount{
	height: 100rpx;
	width: 95%;
	margin: 20rpx;
    background-color:#FFF;
	border-radius: 25rpx;
	position: absolute;
	top: 300rpx;
	margin: 0 30rpx;
}
.discount-l{
	float: left;
	line-height: 100rpx;
}
.discount-l>view{
	float: right;
}
.discount-r{
	float: right;
	line-height: 100rpx;
}
.discount-log1{
	width: 50rpx;
	height: 50rpx;
	margin-left: 20rpx;
	padding-top: 30rpx;
	margin-right: 20rpx;
}
.discount-log2{
	width: 30rpx;
	height: 30rpx;
	margin-right: 20rpx;
}
.menu{
	margin-top: 80rpx;
	width: 95%;
	background-color: #FFF;
	height: 250rpx;
	width: 95%;
	margin-left: 20rpx;
	border-radius: 25rpx ;
}
.menu-t{
	padding-top: 20rpx;
	height: 80rpx;
	border-bottom: #F7F7F7 solid 2px;
}
.mt-t{
	padding-left: 40rpx;
	line-height: 80rpx;
	width: 150rpx;
}
.menu-r{
	float: right;
	margin-top: 20rpx;
}
.menu-p1{
	width: 30rpx;
	height: 30rpx;
	margin-right: 20rpx;
}
.menu-b{
	margin-top: 20rpx;
	display: flex;
	justify-content: space-around;
	padding: 0 30rpx;
}
.btn-pay{
	width: 200rpx;
	height: 100rpx;
	line-height:100rpx ;
	border-radius: 20rpx;
	background-image: url("/static/my/组 9@2x(0).png");
	text-align: center;
	background-size: cover;
	box-sizing: border-box;
	margin: 0 10rpx;
}
.btn-use{
	width: 200rpx;
	height: 100rpx;
	line-height:100rpx ;
	border-radius: 20rpx;
	background-image: url("/static/my/组 9@2x(1).png");
	background-size: cover;
	box-sizing: border-box;
	text-align: center;
	margin: 0 10rpx;
}
.btn-review{
	width: 200rpx;
	height: 100rpx;
	line-height:100rpx ;
	border-radius: 20rpx;
	background-image: url("/static/my/组 9@2x(2).png");
	background-size: cover;
	box-sizing: border-box;
	text-align: center;
	margin: 0 10rpx;
}
.services-t{
	padding-top: 20rpx;
	height: 80rpx;
	border-bottom: #F7F7F7 solid 2px;
}
.services{
	margin-top: 15rpx;
	width: 95%;
	background-color: #FFF;
	margin-left: 20rpx;
	border-radius: 25rpx ;
}
.services-b{
	
	height: 400rpx;
	margin-left: 50rpx;
	margin-right: 50rpx;
}
.services-bb{
	margin-top: 40rpx;
	display: flex;
	justify-content:space-between;
	height: 150rpx;
	
}
.service-item{
	width: 120rpx;
	height: 100rpx;
	margin: auto;
}
.services-p{
	margin:20rpx auto;
	width: 100rpx;
	height: 70rpx;
	
}
.bottom{
	margin-top: 50rpx;
	width: 95%;
	margin-left: 20rpx;
	border-radius: 25rpx ;
}
.logout{
	background-color:#D9D9D9 ;
	width: 80%;
	border-radius: 50rpx ;
	font-size: 28rpx;
	color: #fff;
}

</style>
